<template>
  <div class="tabs">
    <div
      class="tab"
      :class="{ active: tab.tid == current }"
      v-for="(tab, idx) in tabs"
      :key="idx"
      @click="handle(tab)"
    >
      <span class="icon" :style="{ 'background-image': tab.tid == current?tab.iconA:tab.icon }"></span>
      <span class="txt">{{ tab.name }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    current: {
      type: String,
      default: "home",
    },
  },
  data() {
    return {
      tabs: [
        {
          name: "首页",
          tid: "home",
          icon: "url(" + require("@/assets/imgs/tab-home.svg") + ")",
          iconA: "url(" + require("@/assets/imgs/tab-home-a.svg") + ")",
        },
        {
          name: "购物车",
          tid: "cart",
          icon: "url(" + require("@/assets/imgs/tab-cart.svg") + ")",
          iconA: "url(" + require("@/assets/imgs/tab-cart-a.svg") + ")",
        },
      ],
    };
  },
  computed: {},
  mounted() {},
  methods: {
    handle(tab) {
      if (this.current == tab.tid) return;
      this.$router.replace({ path: `${tab.tid}` });
    },
  },
};
</script>
<style lang="scss" scoped>
.tabs {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  .tab {
    font-size: 16px;
    padding: 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #a9a6a3;
    &.active {
      font-weight: bold;
      color: #ffa352;
    }
    .icon {
      width: 36px;
      height: 36px;
      background-size: 100% 100%;
      display: block;
    }
  }
}
</style>
